<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
<meta charset="UTF-8">
<title>招聘主页</title>
<script type="text/javascript" src="../jquery/jquery-3.5.1.js"></script>
<link href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"> 
 <script src="../bootstrap-3.3.7-dist/js/bootstrap.js"></script> 
</head>
<body >
<nav class="navbar navbar-inverse">
  <div class="container-fluid" >
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">

        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">点我了解</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
          <li class="dropdown">
          <h4> </h4>
           <ul class="list-inline " id="login_befor">
            <li ><a  href="/login" >登录 </a></li>
            <li ><a  href="/base/registerpage" >注册</a></li> 
           </ul>
          </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">个人中心 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="/login">我的招聘</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="/login">我的求职</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="/login">个人信息</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
  <!-- 搜索栏-->
 <div class="row">
 <div class="col-md-3 " >
 <div class="col-md-1 col-md-offset-4">
 <h1 ><span class="label label-info">求职 很方便</span></h1>
 </div>
 </div>
 <div class="col-md-6"  > 
      <form class="form-horizontal " >
        <div class="form-group col-md-11 col-md-offset-4" >
          <input type="text" id="searchssss" class="form-control input-lg" style="border:2px solid green" placeholder="找工作/找房子">
        </div>
        <!-- button不能使用submit类型的，这样会自动刷新页面导致搜索内容会被刷新掉 -->
        <button type="button" id="searchbtn" class="btn btn-success btn-lg ">搜索</button>
      </form>
   </div> 
   <div class="col-md-3" >
    <h1><span class="label label-warning">上岗超级快！</span></h1>
   </div>
 </div>
</nav>

<div class="row">
  <div class="col-md-2" >
   <h1>行业分类</h1> 
  </div>
  <!--  -->
  <div class="col-md-8" style="border:2px solid green">
  <div class="row">
  <div class="col-xs-6 col-md-3">
   <span class="label label-warning">全职</span>
    <a href="#" class="thumbnail">
      <img src="../image/quanzhi.png" alt="...">
    </a>
  </div>
  <div class="col-xs-6 col-md-3">
      <span class="label label-warning">兼职</span>
    <a href="#" class="thumbnail">
      <img src="../image/jianzhi.png" alt="...">
    </a>
  </div>
  <div class="col-xs-6 col-md-3">
      <span class="label label-warning">实习</span>       
    <a href="#" class="thumbnail">
      <img src="../image/shixi.png" alt="...">
    </a>
  </div>
  <div class="col-xs-6 col-md-3">
      <span class="label label-warning">临时工</span>          
    <a href="#" class="thumbnail">
      <img src="../image/lingshigong.png" alt="...">
    </a>
  </div>
</div>
 
  </div>
   <!--  -->
  <div id="qq" class="col-md-2" >
  <h1>招聘公告</h1>
  
  </div>
</div>
<!--  -->
 <div class="row">
  <div class="col-md-2"></div>
  <div id ="efg" class="col-md-8" >
  <!-- 粘贴招聘信息 -->
  <table  class="table table-hover ">
  <tbody id="search_tbody">
  <!-- 粘贴分页信息 -->
  </tbody>
</table>
 <div class="col-md-4 col-md-offset-7" id="recruitment_info">
 <!-- 粘贴分页标签向导 -->
</div>
  </div>
  <div  class="col-md-2"></div>
</div>
<!-- 模态框,显示详细招聘信息 -->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4  id="zpzt"class="modal-title"></h4>
      </div>
      <div id="onerec" class="modal-body">
        <!-- <p>One fine body&hellip;</p> -->
        <!-- 此处放消息体 -->
      </div>
      <div class="modal-footer">
        <button id="toudi" type="button" class="btn btn-default" data-dismiss="modal">投递简历</button>
        <button id="gbbtn" type="button" class="btn btn-primary">关闭</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script type="text/javascript">
//全局变量,模糊查询工作名
var zpname;

$(function () {
	zpname=null;
	
		$.ajax({
			url:"/base/search",
			type:"POST",
			data:{zpname:zpname , pages: 1},
			async: false,   
			success:function(result) {
				
			     pasteSearchInfo(result);
			     paste_navigatepageNums(result)
			}
	  });
})
/**
 * 如果是同步(false)，返回值是true或false，因为执行完send后，开始执行onreadystatechange，
         程序会等到onreadystatechange都执行完，取得responseText后才会继续执行下一条语句，所以returnValue一定有值。
          如果是异步(true)，返回值一定是null，因为程序执行完send后不等xmlhttp的响应，而继续执行下一条语句，
         所以returnValue还没有来的及变化就已经返回null了。
 */
 //模糊查询寻找工作
$("#searchbtn").click(function () {
	zpname=$("#searchssss").val();
	if(zpname!=""){
		$.ajax({
			url:"/base/search",
			type:"POST",
			data:{zpname:zpname , pages: 1},
			async: false,   
			success:function(result) {
				
			     pasteSearchInfo(result);
			     paste_navigatepageNums(result)
			}
	  });
	}else{
		alert("搜索内容不能为空");
	}
});
//粘贴查询信息
function pasteSearchInfo(result){
	$("#search_tbody").empty();
	var sss=result.extend.reminfos.list;
	$.each(sss,function(index,items){
		//列表第一列
		var zpn=$("<span></span>").append(items.zpname).addClass("label label-info");
		var index1=$("<span></span>").append("  ");
		var company=$("<td></td>").append(items.companyInfo.company);
		
		var dt1=$("<dt></dt>").append(zpn);
		var dt2=$("<dt></dt>").append(index1);
		var dt3=$("<dt></dt>").append(company);
		var dl1=$("<dl</dl>").append(dt1).append(dt2).append(dt3);
	
		//搜索第二列
		var salary=$("<span></span>").append(items.salary).addClass("label label-warning");
		var index2=$("<span></span>").append("  ");
		var index3=$("<span></span>").append(" ");
		var xueli=$("<span></span>").append(items.xueli).addClass("label label-info");
		var jinyang=$("<span></span>").append(items.jinyang).addClass("label label-info");
		
		var dt4=$("<dt></dt>").append(salary);
		var dt5=$("<dt></dt>").append(index2);
		var dt6=$("<dt></dt>").append(xueli).append(index3).append(jinyang);
		var dl2=$("<dl</dl>").append(dt4).append(dt5).append(dt6);
		
		//搜索第三列
		var address=$("<span></span>").append(items.companyInfo.address);
		var addressmodel=$("<span></span>").addClass("glyphicon glyphicon-map-marker");
		var identity=$("<span></span>").append(items.companyInfo.identity);
		var index4=$("<span></span>").append("  ");
		
		var dt7=$("<dt></dt>").append(addressmodel).append(" ").append(address);
		var dt8=$("<dt></dt>").append(index4);
		var dt9=$("<dt></dt>").append(identity);
		var dl3=$("<dl</dl>").append(dt7).append(dt8).append(dt9);
		
		//搜索第四列
		var applybtn=$("<button></button>").append(" 申请").addClass("btn btn-default btn-xs")
		.append("<span></span>")
		.addClass("glyphicon glyphicon-send");
		//为申请添加点击事件
		applybtn.click(function(){
			alert("请先登录");
		});
		var detialbtn=$("<button></button>").append(" 详情").addClass("btn btn-default btn-xs")
		.append("<span></span>")
		.addClass("glyphicon glyphicon-log-in");
		
		//为每一个详情添加点击事件
		var zpid=items.zpid;
		detialbtn.click(function(){
			$.ajax({		
				url:"/base/selectRecByPrimaryKey",
				type:"POST",
				data:{zpid:zpid },
				async: false, 
				success:function(result){
					pasteOneRecinfo(result);
				}
			});
		});
		
		var date=$("<span></span>").append(items.time);
		var datemodel=$("<span></span>").addClass("glyphicon glyphicon-time");
		var index5=$("<span></span>").append("  ");
		
		var dt10=$("<dt></dt>").append(applybtn).append(detialbtn);
		var dt11=$("<dt></dt>").append(index5);
		var dt12=$("<dt></dt>").append(datemodel).append("  ").append(date);
		var dl4=$("<dl</dl>").append(dt10).append(dt11).append(dt12);
		
        var td1=$("<td></td>").append(dl1);
        var td2=$("<td></td>").append(dl2);
        var td3=$("<td></td>").append(dl3);
        var td4=$("<td></td>").append(dl4);
        
        $("<tr></tr>")
        .append(td1)
        .append(td2)
        .append(td3)
        .append(td4)
        .appendTo("#search_tbody");
	
		
		
	});
	
}
//粘贴单个项显示详细招聘信息
function pasteOneRecinfo(result){
	$("#onerec").empty();
	$("#myModal").modal({
		backdrop:"static"
	});
	//招聘主题
	var OneRec=result.extend.OneRec;
	$("#zpzt").empty();
	$("#zpzt").append(OneRec.zpname);
	//招聘类别
	var zwxz=$("<span></span>").append(OneRec.jobxingzhi.zhiweiname).addClass("label label-info");
	var zw=$("<dt></dt>").append(zwxz);
	//招聘者
	var com=$("<span></span>").append(OneRec.companyInfo.company);
	var index=$("<span></span>").append(".");
	var identity=$("<span></span>").append(OneRec.companyInfo.identity);
	var zhaoinzhe=$("<dt></dt>").append(com).append(index).append(identity);
	//薪资
	var salary=$("<span></span>").append("薪资:  ");
	var sal=$("<dt></dt>").append(salary).append(OneRec.salary);
	//学历
	var xueli=$("<span></span>").append("学历:  ");
	var xul=$("<dt></dt>").append(xueli).append(OneRec.xueli);
	//经验
	var jinyang=$("<span></span>").append("经验:  ");
	var jyg=$("<dt></dt>").append(jinyang).append(OneRec.jinyang);
	//职位详情
	var zwxq=$("<span></span>").append("职位详情").addClass("label label-info");
	var zwx=$("<dt></dt>").append(zwxq);
	//岗位职责
	var gwzz=$("<span></span>").append("岗位职责");
	var gwy=$("<dt></dt>").append(gwzz);
	var gongzuozhize=$("<dt></dt>").append(OneRec.gongzuozhize);
	//岗位要求
	var gwyq=$("<span></span>").append("岗位要求");
	var gzyq=$("<dt></dt>").append(gwyq);
	var gongzuoyaoqiu=$("<dt></dt>").append(OneRec.gongzuoyaoqiu);
	
	//公司信息
	var gsxx=$("<span></span>").append("公司信息").addClass("label label-info");
	var gsxx1=$("<dt></dt>").append(gsxx);
	//名称
	var companyname=$("<span></span>").append("名称:  ");
	var company=$("<dt></dt>").append(companyname).append(OneRec.companyInfo.company);
	//地址
	var addr=$("<span></span>").append("地址：  ");
	var address=$("<dt></dt>").append(addr).append(OneRec.companyInfo.address);
	//电话
	var tele=$("<span></span>").append("电话：  ");
	var telephone=$("<dt></dt>").append(tele).append(OneRec.companyInfo.telephone);
	//官网
	var web=$("<span></span>").append("官网：  ");
	var website=$("<dt></dt>").append(web).append(OneRec.companyInfo.web);
	var dl=$("<dl></dl>")
	.append(zhaoinzhe)
	.append(zw)
	.append(sal)
	.append(xul)
	.append(jyg)
	.append(zwx)
	.append(gwy)
	.append(gongzuozhize)
	.append(gzyq)
	.append(gongzuoyaoqiu)
	.append(gsxx1)
	.append(company)
	.append(address)
	.append(telephone)
	.append(website)
	.appendTo("#onerec");
	
}

//粘贴分页信息
function paste_navigatepageNums(result) {
	
	//插入前先清空
	$("#recruitment_info").empty();
	var navigatepages=result.extend.reminfos.navigatepageNums;
	//当前页
	var pageNum=result.extend.reminfos.pageNum;
	
	
	var firstPage=$("<li></li>").append($("<a></a>").append("首页"));
	
	firstPage.click(function () {
		toPage(1);
	});
	var perviousPage=$("<li></li>").append($("<a></a>").append("&laquo;"));
	
	perviousPage.click(function() {
			if(result.extend.reminfos.hasPreviousPage==true){
			
			toPage(result.extend.reminfos.prePage);
			}
		});
		
	var nextPage=$("<li></li>").append($("<a></a>").append("&raquo;"));
	
	nextPage.click(function() {
	if(result.extend.reminfos.hasNextPage==true)
	{
		
		toPage(result.extend.reminfos.nextPage);
	}
	});
	var lastPage=$("<li></li>").append($("<a></a>").append("末页"));
	
	lastPage.click(function () {
		toPage(result.extend.reminfos.pages);
	});
	
	var ul=$("<ul></ul>").addClass("pagination");
	var nav=$("<nav></nav>");
	//判断是否有前一页
	if(result.extend.reminfos.hasPreviousPage==false)
		{
		firstPage.addClass("disabled");
		perviousPage.addClass("disabled ");
		}
	ul.append(firstPage).append(perviousPage);
	//遍历插入并添加点击事件
	$.each(navigatepages,function(index,items){
		var numli= $("<li></li>").append($("<a></a>").append(items));
		if(pageNum==items){
		
			numli.addClass("active");
		}
		numli.click(function() {
			toPage(items);
		});
		ul.append(numli);
		});
	
	//判断是否有后一页
	if(result.extend.reminfos.hasNextPage==false)
	{
	nextPage.addClass("disabled");
	lastPage.addClass("disabled");
	}
	ul.append(nextPage).append(lastPage);
	nav.append(ul).appendTo("#recruitment_info");
}
//分页标签点击进行页面跳转
function toPage(page) {	
	$.ajax({
		url:"/base/search",
		data:{zpname:zpname , pages: page},
		type:"POST",
		ansyc:false,
		success:function(result)
		{
			pasteSearchInfo(result);
			paste_navigatepageNums(result);
		}
		
	});
}
//点击模态框进行投递时，由于未登录，不能进行投递
$("#toudi").click(function(){
	
	alert("您还未登录，请先登录在进行投递");
	$("#myModal").modal('hide');
	//window.location.href="/login";
	
})
//手动关闭模态框
$("#gbbtn").click(function(){
	$("#myModal").modal('hide');
})

</script>
</body>
</html>